<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02计算器</title>
    <style>
        *{
            margin: 0;
        }
        .main{
            width: 500px;
            height: 500px;
            background-color: #ddd;
            margin: 0 auto;
            position: relative;
        }

        .main>.center{
          position: absolute;
          width: 200px;
          height: 150px;
          background-color: #e8e8e8;
          margin: 0 auto;
          top: 200px;
          left: 140px;
        }

        .main>.center>.m{
          position: absolute;
          text-align: center;
          left: 20px;
          margin: 0 auto;
        }

        .main>.center>.m>input{
          width: 100px;
          height: 20px;
          margin: 0 auto;
        }
        .main>.center>.m>button{
          border-radius: 10px;
          border: 1px solid #000;
          color: #0aa1ed;
        }
        .main>.center>.m>h1{
         color: #62B5EC;
        }


    </style>
</head>
<body>
  <div class="main">
    <div class="center">
      <div class="m">
        <h1>简易计算器</h1>
        <input type="text" id="i1" placeholder="请输入第一个值">
        <br>
        <input type="text" id="i2" placeholder="请输入第二个值">
        <br>
        <button onclick="calc('+')" >加</button>
        <button onclick="calc('-')" >减</button>
        <button onclick="calc('*')" >乘</button>
        <button onclick="calc('/')" >除</button>
        <h4>运算结果：<span> </span></h4>
      </div>
    </div>
  </div>

  <script>
    function calc(o){
      let n1 = document.getElementById('i1').value;
      let n2 = document.getElementById('i2').value;
      n1 = parseFloat(n1);
      n2 = parseFloat(n2);
      if (isNaN(n1) || isNaN(n2)){
        alert("请输入数字!")
      }
      let spanE = document.querySelector('span');
      console.log(spanE)
      switch (o){
        case '+':
          spanE.innerHTML = n1 + n2;
          break;
        case '-':
          spanE.innerHTML = n1 - n2;
          break;
        case '*':
          spanE.innerHTML = n1 * n2;
          break;
        case '/':
          if (n2 != 0){
            spanE.innerHTML = n1 / n2;
            break;
          }else{
            alert("除数不能为0")
          }
      }
    }
  </script>
</body>
</html>